<template>
	<view>
		<ttBar leftIcon="icon-back"  title="修改密码"></ttBar>
		<view class="regBox hasTop">
			
			<view class="regRow">
				<text class="labelName">原密码</text>
				<input type="text" :password="oldShow" placeholder="请输入原密码" v-model="oldPass" maxlength="16" />
				<text class="iconfont" :class="[oldShow?'icon-eyeClose':'icon-eyeOpen']" @tap="toggleOld"></text>
			</view>
			<view class="regRow">
				<text class="labelName">新密码</text>
				<input type="text" :password="newShow" placeholder="6-16位字母、字符含数字" v-model="newPass" maxlength="16" />
				<text class="iconfont" :class="[newShow?'icon-eyeClose':'icon-eyeOpen']" @tap="toggleNew"></text>
			</view>
			
			<view class="registerBtnBox">
				<button class="registerBtn" @tap="editPass">完成</button>
			</view>
		</view>

	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	export default {
		components: {
			ttBar
		},
		data() {
			return {
				oldPass:'',
				oldShow:true,
				newPass:'',
				newShow:true,
			};
		},
		methods:{
			toggleOld(){
				this.oldShow=!this.oldShow
			},
			toggleNew(){
				this.newShow=!this.newShow
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.regBox {
		display: flex;
		flex-direction: column;
		padding-left: 40upx;
		padding-right: 40upx;
		padding-top: 50upx;

		

		.regRow {
			display: flex;
			border-bottom: 1px solid #e7e7e7;
			padding-bottom: 30upx;
			padding-top: 58upx;
			align-items: center;

			

			.iconfont {
				font-size: 40upx;
			}

			>input {
				font-size: 35rpx;
				flex-shrink: 1;
				flex-grow: 1;
				margin-left: 36upx;
			}

			.labelName {
				font-size: 36rpx;
				font-weight: bold;
				color: #565866;
				flex-shrink: 0;
			}
		}
		
		.registerBtnBox{
			padding: 0 60upx;
			margin-top: 92upx;
			.registerBtn{
				width: 100%;
				height: 88upx;
				border-radius: 44upx;
				background-color: #ffb423;
				color: #FFFFFF;
				font-size: 34upx;
			}
			.registerBtn:after{
				border: none;
			}
		}
	}
</style>
